<template>
    <div class="iframe-container">
        <iframe id="iframeContainer" :src="iframeUrl" frameborder="0"></iframe>
    </div>
</template>
   
<script>
import { mapGetters } from 'vuex'

export default {
    name: 'IframeContainer',
    props: {
        iframeUrl: {
            type: String,
            default: 'http://10.77.50.193:5170/graph_show/',
        }
    },
    data() {
        return {
        }
    },
    mounted() {
        this.initIframe()

        window.onresize = () => {
            this.initIframe()
        }   
    },
    methods: {
        initIframe() {
            const iframeContainer = document.getElementById('iframeContainer')
            const deviceWidth = document.documentElement.clientWidth
            const deviceHeight = document.documentElement.clientHeight
            iframeContainer.style.width = (Number(deviceWidth)-250) + 'px'
            iframeContainer.style.height = (Number(deviceHeight)-120) + 'px'
        }
    }
}
</script>
   
<style scoped>
.iframe-container {
    width: 100%;
    height: 100%;
}
</style>